<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高级</title>
  <style>
    #rcorners1 {
      border-radius: 25px;
      background: #73ad21;
      padding: 20px;
      width: 200px;
      height: 150px;
    }

    #rcorners2 {
      border-radius: 25px;
      border: 2px solid #73ad21;
      padding: 20px;
      width: 200px;
      height: 150px;
    }

    #rcorners3 {
      border-radius: 25px;
      background: url("/img/1.jpg");
      background-position: left top;
      background-repeat: repeat;
      padding: 20px;
      width: 200px;
      height: 150px;
    }

    #example1{
      background-image: url("/img/1.jpg"),url("/img/3.jpg");
      background-position: right bottom,left top;
      background-repeat: no-repeat,repeat;
      padding: 15px;
    }
  </style>
</head>
<!--
圆角
CSS border-radius 属性
CSS border-radius 属性定义元素角的半径。
提示：您可以使用此属性为元素添加圆角！
1.带有指定背景颜色的元素的圆角
2.带边框元素的圆角
3.带有背景图像的元素的圆角
提示：border-radius 属性实际上是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

边框图像
CSS 边框图像
通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

属性	描述
border-image	用于设置所有 border-image-* 属性的简写属性。
border-image-source	规定用作边框的图像的路径。
border-image-slice	规定如何裁切边框图像。
border-image-width	规定边框图像的宽度。
border-image-outset	规定边框图像区域超出边框盒的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。


多重背景
CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：


-->
<body>
<div>
  <h1>border-radius 属性</h1>
  <p>拥有指定背景颜色的元素的圆角:</p>
  <p id="rcorners1">Rounded corners!</p>
  <p>带边框元素的圆角:</p>
  <p id="rcorners2">Rounded corners!</p>
  <p>拥有背景图片的元素的圆角:</p>
  <p id="rcorners3">Rounded corners!</p>
</div>
<div>
  <h1>多重背景</h1>
  <p>下面的div元素有两副背景图像</p>
  <div id="example1">
    <h1>Welcome to Shanghai</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
    <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
  </div>
</div>
</body>
</html>
